<template>
  <div class="dashboard-container">
    <el-card class="tableBar mt-3">
      <el-row justify="space-between">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="菜品名称">
            <el-input v-model="searchForm.name" style="width: 80%" placeholder="请输入菜品名称" clearable />
          </el-form-item>
          <el-form-item label="菜品分类">
            <el-select v-model="searchForm.categoryId" placeholder="请选择菜品分类" clearable>
              <el-option v-for="item in categoryList" :value="item.id" :key="item.id" :label="item.name">{{
                item.name
              }}</el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="售卖状况">
            <el-select v-model="searchForm.status" placeholder="请选择售卖状况" clearable>
              <el-option label="停售" :value="0" />
              <el-option label="启售" :value="1" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="normal-btn continue" type="primary" @click="search">查询</el-button>
            <el-button class="normal-btn continue" @click="clear">清除</el-button>
          </el-form-item>
        </el-form>
        <el-row>
          <el-button type="primary" :icon="Plus" @click="addDish">添加菜品</el-button>
          <el-button type="danger" text bg :icon="Delete" @click="batchDelete">批量删除</el-button>
        </el-row>
      </el-row>
    </el-card>
    <el-card class="mt-3">
      <el-table v-loading="loading" class="tableBox" :data="dishList" @selection-change="selectionChange">
        <el-table-column align="center" width="60" type="selection" label="序号" />
        <el-table-column align="center" width="150" prop="name" label="菜品名称" />
        <el-table-column align="center" width="200" label="图片">
          <template v-slot="{ row }">
            <el-image :src="row.image" fit="cover" class="dish-image" />
          </template>
        </el-table-column>
        <el-table-column align="center" width="150" prop="type" label="菜品分类">
          <template v-slot="{ row }">
            <el-tag type="primary">{{ row.categoryName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="sort" label="售价" width="80">
          <template v-slot="{ row }">
            <strong>￥{{ row.price }}</strong>
          </template>
        </el-table-column>
        <el-table-column align="center" width="200" label="分类售卖状态">
          <template v-slot="{ row }">
            <el-switch
              v-model="row.status"
              inline-prompt
              active-text="启用"
              inactive-text="禁用"
              :inactive-value="0"
              :active-value="1"
              @change="changeDishStatus(row)"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" prop="updateTime" label="操作时间" />
        <el-table-column align="center" label="操作">
          <template v-slot="{ row }">
            <el-button type="primary" :icon="Edit" @click="updateDish(row)">修改</el-button>
            <el-button type="danger" :icon="Delete" @click="deleteDish(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-card class="mt-3">
      <el-row justify="center" style="width: 100%" class="mt-3">
        <el-pagination
          class="pageList"
          :page-sizes="[5, 10, 20, 30]"
          layout="prev, pager, next, jumper, -> ,total, sizes"
          :total="pageData.total"
          v-model:current-page="pageData.page"
          v-model:page-size="pageData.pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
        />
      </el-row>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue"
import { useRouter } from "vue-router"
import { Edit, Delete, Plus } from "@element-plus/icons-vue"
import { ElMessage, ElMessageBox } from "element-plus"
import { getCategoryListAllAPI } from "@/api/category"
import { getDishListAPI, deleteDishAPI, changeDishStatusAPI } from "@/api/dish"

// 分页数据
const pageData = ref({
  page: 1,
  pageSize: 10,
  total: 0
})

// 全局路由
const router = useRouter()

// 加载状态
const loading = ref(false)

// 页码页数切换
const handleSizeChange = (val: number) => {
  pageData.value.pageSize = val
  getDishList()
}
const handleCurrentChange = (val: number) => {
  pageData.value.page = val
  getDishList()
}

// 添加菜品
const addDish = () => {
  router.push("/dish/add")
}

// 菜品列表
const dishList = ref<any[]>([])

// 获取菜品列表
const getDishList = async () => {
  const res = await getDishListAPI({
    page: pageData.value.page,
    pageSize: pageData.value.pageSize
  })

  if (res.code === 1) {
    dishList.value = res.data.records
    pageData.value.total = res.data.total
  }
}

// 查询表单数据
const searchForm = ref({
  categoryId: "",
  name: "",
  status: ""
})

// 菜品分类列表
const categoryList = ref<any[]>([])

// 获取菜品分类列表
const getCategoryList = async () => {
  const res = await getCategoryListAllAPI(1)

  if (res.code === 1) {
    categoryList.value = res.data
  }
}

// 查询操作
const search = async () => {
  const res = await getDishListAPI({
    page: pageData.value.page,
    pageSize: pageData.value.pageSize,
    name: searchForm.value.name,
    //@ts-ignore
    categoryId: searchForm.value.categoryId,
    status: parseInt(searchForm.value.status)
  })

  if (res.code === 1) {
    dishList.value = res.data.records
    pageData.value.total = res.data.total
  }
  console.log(searchForm.value)
}

// 清除
const clear = () => {
  searchForm.value = {
    categoryId: "",
    name: "",
    status: ""
  }
  // 重新查询数据
  pageData.value.page = 1
  getDishList()
}

// 分类状态切换
const changeDishStatus = async (item: any) => {
  const res = await changeDishStatusAPI(item.id, item.status)
  if (res.code === 1) {
    ElMessage.success("操作成功")
  } else {
    ElMessage.error(res.msg)
  }
}

// 修改菜品
const updateDish = (item: any) => {
  router.push(`/dish/add?id=${item.id}`)
}

// 删除菜品
const deleteDish = (item: any) => {
  ElMessageBox.confirm("确定删除该菜品?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    const res = await deleteDishAPI(item.id)
    if (res.code === 1) {
      ElMessage.success("删除成功")
      getDishList()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

// 当前需要删除的菜品
const deleteDishIds = ref<any[]>([])
// 选择菜品
const selectionChange = (dishList: any[]) => {
  deleteDishIds.value = dishList.map((item: any) => item.id)
}

// 批量删除
const batchDelete = async () => {
  ElMessageBox.confirm(`确定删除该${deleteDishIds.value.length}项菜品吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    const res = await deleteDishAPI(deleteDishIds.value.join(","))
    if (res.code === 1) {
      ElMessage.success("删除成功")
      getDishList()
    } else {
      ElMessage.error(res.msg)
    }
  })
}

onMounted(() => {
  getDishList()
  getCategoryList()
})
</script>

<style lang="scss" scoped>
.disabled-text {
  color: #bac0cd !important;
}
::v-deep(.el-pager li) {
  border-radius: 5px !important;
}

.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
.dish-image {
  width: 100px;
  border-radius: 10px;
}
</style>
